<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>新闻详情、评论</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./utils.js"></script>
    <script src="./common.js"></script>
    <style>
        .layui-nav {
            text-align: right;
        }

        .main {
            padding: 20px;
        }
    </style>
</head>

<body>

    <ul class="layui-nav">
        <li class="layui-nav-item activeInfo"></li>
    </ul>
    <div class="main">
        <div class="layui-panel">
            <div style="padding: 50px 30px;">
                <div class="layui-card">
                    <div class="layui-card-header"></div>
                    <div class="layui-card-body">
                    </div>
                </div>
                <!-- 评论部分 -->
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th>昵称</th>
                            <th>评论内容</th>
                            <th>评论时间</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
<script>
    let userId = JSON.parse(getCookie("userInfo")).id;
    let newsId = JSON.parse(getCookie("newId"))
    console.log(userId);
    /* 
        1.请求地址：url
        2.请求方式：method
        3.是否异步：async
        4.带给后端的数据：data
        5.请求头信息: headers
        6.是否解析响应体：dataType
        7.成功以后的函数：success
    */
    //新闻部分
    let title = document.querySelector('.layui-card-header')
    let content = document.querySelector('.layui-card-body')
    ajax({
        url: 'http://phpclub.org.cn/edu/server/getContent.php',
        data: {
            id: newsId
        },
        dataType: 'json',
        success: res => {
            title.innerHTML = res.data.title
            content.innerHTML = res.data.content
        }
    })
    // 评论部分
    let tbody = document.querySelector('tbody')
    ajax({
        url: 'http://phpclub.org.cn/edu/server/getComment.php',
        data: {
            userId,
            newsId,
            page: 15,
            pageSize: 10
        },
        dataType: 'json',
        success: res => {
            console.log(res);
            res.data.forEach(v => {
                let tr = document.createElement('tr')
                for (const key in v) {
                    if (key === 'user_id') {
                        let td = document.createElement('td')
                        td.innerHTML = v[key]
                        tr.appendChild(td)
                    }
                    if (key === 'created_at') {
                        let td = document.createElement('td')
                        td.innerHTML = new Date(v[key]).toLocaleString()
                        tr.appendChild(td)
                    }
                    if (key === 'content') {
                        let td = document.createElement('td')
                        td.innerHTML = v[key]
                        tr.appendChild(td)
                    }
                }
                tbody.appendChild(tr)
            });


        }
    })
</script>

</html>